<!-- js -->
<script setup>
    // 指令
    // 1.概念：作用在标签上，vue的特殊语法
    // 2.作用：增强标签渲染数据的能力
    // 3.分类
      // 5.列表渲染指令: 基于数组循环生成一套列表

      // 6.双向绑定指令: 数据<->视图(数据与视图相互影响)
  import { ref } from 'vue'
  // 控制盒⼦的显⽰或隐藏
  const visible = ref(true)
</script>
<!-- html -->
<template>
  <h3>面板</h3>
  <div class="panel">
    <div class="title">
    <h4>⾃由与爱情</h4>
    <span
      class="btn"
      @click="visible = !visible">
      {{ visible ? '收起' : '展开' }}
    </span>
    </div>
    <div
      class="container"
      v-show="visible">
      <p>⽣命诚可贵, </p>
      <p>爱情价更⾼。</p>
      <p>若为⾃由故，</p>
      <p>两者皆可抛。</p>
    </div>
  </div>
</template>
# 样式
<style lang="scss">
  body {
    background-color: #ccc;
  }
  #app {
    width: 400px;
    margin: 20px auto;
    padding: 1em 2em 2em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    background-color: #fff;
  }
  #app h3 {
    text-align: center;
  }
  .panel {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1em;
      border: 1px solid #ccc;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      cursor: pointer;
    }
  }
// 注意：当前App编写样式⽤到了 sass 预处理器语法，
// 脚⼿架⼯程默认不⽀持 css 预处理器的编译，需要安装相应的模块
// npm i -D sass-embedded
// npm i sass-embedded -D
</style>